<template>
  <div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="20" justify="space-between">
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex items-center">
              <img :src="avatar" alt="" class="mr-20px h-70px w-70px rounded-[50%]" />
              <div>
                <div class="text-20px">
                  {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
                </div>
                <div class="mt-10px text-14px text-gray-500">
                  {{ t('workplace.toady') }}，20℃ - 32℃！
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
  <el-row class="mt-5px" :gutter="20" justify="space-between">
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never" class="mt-5px">
        <el-skeleton :loading="loading" animated>
          <Echart :options="barOptionsData" :height="280" />
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never" class="mt-10px">
        <template #header>
          <div class="h-3 flex justify-between">
            <span>{{ t('workplace.notice') }}</span>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
            <div class="flex items-center">
              <img :src="avatar" alt="" class="mr-20px h-35px w-35px rounded-[50%]" />
              <div>
                <div class="text-14px">
                  <Highlight :keys="[getDictLabel(DICT_TYPE.SYSTEM_NOTICE_TYPE, item.type)]">
                    {{ getDictLabel(DICT_TYPE.SYSTEM_NOTICE_TYPE, item.type) }} : {{ item.title }}
                  </Highlight>
                  <div v-html="item.content"></div>
                </div>
                <div class="mt-15px text-12px text-gray-400">
                  {{ formatTime(item.createTime, 'yyyy-MM-dd') }}
                </div>
              </div>
            </div>
            <el-divider />
          </div>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never" class="mt-5px">
        <Echart :options="examineOptionsData" :height="600" />
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never" class="mt-10px">
        <Echart :options="todoOptionsData" :height="600" />
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never" class="mt-10px">
        <Echart :options="temperatureOptions" :height="400" />
      </el-card>
    </el-col>
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
      <el-card shadow="never" class="mt-10px">
        <Echart :options="taskStatusOptions" :height="600" />
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'

import { useUserStore } from '@/store/modules/user'
import avatarImg from '@/assets/imgs/avatar.gif'
import type { Notice } from './types'
import {
  barOptions,
  examineOptions,
  taskStatusOptions,
  temperatureOptions,
  todoOptions
} from './echarts-data'
import * as NoticeApi from '@/api/system/notice'
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
import { examineCount, examineData } from '@/api/data/dashboard'

defineOptions({ name: 'Home' })

const { t } = useI18n()
const userStore = useUserStore()
const loading = ref(true)
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
const username = userStore.getUser.nickname

// 获取通知公告
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  title: '',
  type: undefined,
  status: 0
})
const getNotice = async () => {
  loading.value = true
  try {
    const data = await NoticeApi.getNoticePage(queryParams)
    list.value = data.list
    total.value = data.total
    notice = Object.assign(notice, data.list)
  } finally {
    loading.value = false
  }
}
let notice = reactive<Notice[]>([])

/**
 * 获取待审核总数量
 */
const todoOptionsData = reactive<EChartsOption>(todoOptions) as EChartsOption
const getToDoCount = async () => {
  // 从服务器获取待办任务数据
  const data = await examineCount()
  // 设置图表系列（series）的数据，将总数作为值
  todoOptionsData!.series![0].data = [{ value: data }]
}

/**
 * 获取待审核数量
 */
const examineOptionsData = reactive<EChartsOption>(examineOptions) as EChartsOption
const getExamineCount = async () => {
  // 从服务器获取报销数据
  const data = await examineData()
  // 设置图表图例（legend）的数据，使用报销类型名称
  set(
    examineOptionsData,
    'legend.data',
    data.map((v) => v.name)
  )
  // 设置图表系列（series）的数据，包括报销类型名称和对应的报销金额
  examineOptionsData!.series![0].data = data.map((v) => {
    return {
      name: v.name, // 报销类型名称
      value: v.value // 报销金额
    }
  })
}

const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
  const data = [
    { value: 13253, name: 'analysis.monday' },
    { value: 34235, name: 'analysis.tuesday' },
    { value: 26321, name: 'analysis.wednesday' },
    { value: 12340, name: 'analysis.thursday' },
    { value: 24643, name: 'analysis.friday' },
    { value: 1322, name: 'analysis.saturday' },
    { value: 1324, name: 'analysis.sunday' }
  ]
  set(
    barOptionsData,
    'xAxis.data',
    data.map((v) => t(v.name))
  )
  set(barOptionsData, 'series', [
    {
      name: t('analysis.activeQuantity'),
      data: data.map((v) => v.value),
      type: 'bar'
    }
  ])
}

const getAllApi = async () => {
  await Promise.all([getNotice(), getWeeklyUserActivity(), getExamineCount(), getToDoCount()])
  loading.value = false
}

getAllApi()
</script>
